<template>
	<!-- 首页优惠券卡片 -->
	<view class="coupon-category-box">
		<view v-if="detail.length < 2">
			<view class="coupon-wrap"  v-for="(item, index) in detail" :key="index">
				<view class="coupon-pic">
					<view class="coupon-pic_price">{{item.price}}</view>
					<text class="coupon-pic_man" v-if="item.satisfy == 1">满{{item.satisfy_price}}可用</text>
					<text class="coupon-pic_man" v-else>无门槛</text>
				</view>
				<view class="coupon-right">
					<text class="coupon-right_title">{{item.name}}</text>
					<view class="coupon-right_bottom">
						<text v-if="item.expire_type == 1">有效期 {{item.start_time}}-{{item.end_time}}</text>
						<text v-else>领取后{{item.expire_day}}天内有效</text>
						<view @tap="$emit('couponGet',item)">立即领取</view>
					</view>
				</view>
			</view>
		</view>
		<view class="coupon-swiper" v-else>
			<swiper class="coupon-swiper-box" @change="onSwiper" circular :autoplay="true" :interval="5000" :duration="500">
				<swiper-item class="swiper-item" v-for="(item, index) in detail" :key="index">
					<view class="coupon-wrap">
						<view class="coupon-pic">
							<view class="coupon-pic_price">{{item.price}}</view>
							<text class="coupon-pic_man" v-if="item.satisfy == 1">满{{item.satisfy_price}}可用</text>
							<text class="coupon-pic_man" v-else>无门槛</text>
						</view>
						<view class="coupon-right">
							<text class="coupon-right_title">{{item.name}}</text>
							<view class="coupon-right_bottom">
								<text v-if="item.expire_type == 1">有效期 {{item.start_time}}-{{item.end_time}}</text>
								<text v-else>领取后{{item.expire_day}}天内有效</text>
								<view @tap="$emit('couponGet',item)">立即领取</view>
							</view>
						</view>
					</view>
			    </swiper-item>
			</swiper>
			<text class="coupon-wrap-bs">{{categoryCurrent+1}}/{{detail.length}}</text>
		</view>
	</view>
</template>

<script>
export default {
	props:{
		detail:{
			type:Array
		}
	},
	data() {
		return {
			categoryCurrent: 0, //分类轮播下标
			couponList: [
				{
					amount: "10.00",
					description: "",
					enough: "30.00",
					gettime: {start: 1590940800, end: 1594396799},
					end: 1594396799,
					start: 1590940800,
					gettimeend: 1594396799,
					gettimestart: 1590940800,
					goods_ids: "1,12,9,14,17,6,5,2,13,15,10,3,11,8,4,7",
					id: 1,
					limit: 1,
					name: "优惠券",
					stock: 895,
					usetime: {start: 1590940800, end: 1594396799},
					end: 1594396799,
					start: 1590940800,
					usetimeend: 1594396799,
					usetimestart: 1590940800
				},
				{
					amount: "20.00",
					description: "",
					enough: "50.00",
					gettime: {start: 1590940800, end: 1594396799},
					end: 1594396799,
					start: 1590940800,
					gettimeend: 1594396799,
					gettimestart: 1590940800,
					goods_ids: "15,1,12,9,14,17,5",
					id: 2,
					limit: 1,
					name: "优惠券",
					stock: 9931,
					usetime: {start: 1590940800, end: 1594396799},
					end: 1594396799,
					start: 1590940800,
					usetimeend: 1594396799,
					usetimestart: 1590940800
				}
			]
		};
	},
	props: {
		detail: {},
		state: {
			type:Number,
			default:0
		}, //0:立即领取，1：去使用，2：查看详情，3：已失效。
		couponData: {}
	},
	computed: {},
	created() {
		// console.log('coupons', this.detail);
		// this.getCouponsList();
	},
	methods: {
		// jump(path, parmas) {
		// 	this.$Router.push({
		// 		path: path,
		// 		query: parmas
		// 	});
		// },
		// 轮播
		onSwiper(e) {
			this.categoryCurrent = e.detail.current;
		},
		// // 优惠券列表
		// getCouponsList() {
		// 	let that = this;
		// 	that.$api('coupons.lists', {
		// 		ids: that.detail.ids
		// 	}).then(res => {
		// 		if (res.code === 1) {
		// 			that.couponList = res.data;
		// 		}
		// 	});
		// }
	}
};
</script>
<style lang="less">
	/* x水平排列*/
	.x-f {
		display: flex;
		align-items: center;
	}
	/*x两端且水平居中*/
	.x-bc {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	/*x平分且水平居中*/
	.x-ac {
		display: flex;
		justify-content: space-around;
		align-items: center;
	}
	/*x水平靠上对齐*/
	.x-start {
		display: flex;
		align-items: flex-start;
	}
	/*x水平靠下对齐*/
	.x-end {
		display: flex;
		align-items: flex-end;
	}
	/*上下左右居中*/
	.x-c {
		display: flex;
		justify-content: center;
		align-items: center;
	}
	/*y竖直靠左*/
	.y-start {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
	}
	/*y竖直靠右*/
	.y-end {
		display: flex;
		flex-direction: column;
		align-items: flex-end;
	}
	/*y竖直居中*/
	.y-f {
		display: flex;
		flex-direction: column;
		align-items: center;
	} 
	/*y竖直两端*/
	.y-b {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}
	/*y竖直两端居中*/
	.y-bc {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-between;
	}
</style>
<style lang="scss">
	.coupon-swiper{
		position: relative;
		overflow: hidden;
		.coupon-wrap-bs{
			position: absolute;
			top: 30upx;
			right: 0;
			width: 70upx;
			height: 36upx;
			line-height: 36upx;
			text-align: center;
			color: #FFFFFF;
			background:rgba(102,102,102,0.14);
			font-size: 22upx;
			border-top-left-radius:18upx;
			border-bottom-left-radius:18upx;
			padding-left:10upx;
			box-sizing: border-box;
		}
	}
	// 未领取，已领取
	.coupon-wrap{
		padding: 30upx 20upx;
		box-sizing: border-box;
		background-color: #FFFFFF;
		display: flex;
		align-items: center;
		position: relative;
		height: 100%;
		.coupon-pic{
			width:134upx;
			height:182upx;
			background: url('https://jy-shops.oss-cn-beijing.aliyuncs.com/client/image/add_images/index-coupon.png');
			background-repeat: no-repeat;
			background-size: contain;
			position: relative;
			.coupon-pic_price{
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 55%;
				font-size:50upx;
				color: #FF2842;
				font-weight: bold;
				text-align: center;
				line-height: 114upx;
				&::before{
					content: "￥";
					font-size: 28upx;
					display: inline-block;
				}
			}
			.coupon-pic_man{
				position: absolute;
				top:55%;
				left: 0;
				width: 100%;
				height:30%;
				font-size: 20upx;
				color: #FFFFFF;
				text-align: center;
				line-height: 68upx;
			}
		}
		.coupon-right{
			flex: 1;
			margin-left: 40upx;
			.coupon-right_title{
				font-size: 28upx;
				height:80upx;
				line-height:40upx;
				color: #333333;
				overflow: hidden;
				display: block;
				margin-bottom:20upx;
				width: 72%;
			}
			.coupon-right_bottom{
				display: flex;
				align-items: center;
				justify-content: space-between;
				text{
					font-size: 22upx;
					color: #666666;
					flex: 1;
				}
				view{
					padding: 8upx 25upx;
					box-sizing: border-box;
					background:linear-gradient(90deg,rgba(253,115,119,1),rgba(255,40,66,1));
					border-radius: 26upx;
					color: #FFFFFF;
					font-size: 24upx;
				}
			}
		}
	}
</style>
